<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
String htmlData = request.getParameter("content1") != null ? request.getParameter("content1") : "";
%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/resource/js/jquery-3.2.1.js"></script>
<link rel="stylesheet" href="/resource/kindeditor/themes/default/default.css" />
	<link rel="stylesheet" href="/resource/kindeditor/plugins/code/prettify.css" />
	<script charset="utf-8" src="/resource/kindeditor/kindeditor.js"></script>
	<script charset="utf-8" src="/resource/kindeditor/lang/zh-CN.js"></script>
	<script charset="utf-8" src="/resource/kindeditor/plugins/code/prettify.js"></script>
	<script>
		KindEditor.ready(function(K) {
			window.editor1 = K.create('textarea[name="content1"]', {
				cssPath : '/resource/kindeditor/plugins/code/prettify.css',
				uploadJson : '/resource/kindeditor/jsp/upload_json.jsp',
				fileManagerJson : '/resource/kindeditor/jsp/file_manager_json.jsp',
				allowFileManager : true,
				afterCreate : function() {
					var self = this;
					K.ctrl(document, 13, function() {
						self.sync();
						document.forms['example'].submit();
					});
					K.ctrl(self.edit.doc, 13, function() {
						self.sync();
						document.forms['example'].submit();
					});
				}
			});
			prettyPrint();
		});
	</script>
<meta charset="UTF-8">
<title>发布文章</title>
</head>
<body>
	<%=htmlData%>
	<!-- 使用表单提交 -->
	<!-- <form action="publish" method="post" enctype="multipart/form-data" > -->
	<form >
		 <div class="form-group">
		    <label for="title">文章标题</label>
		    <input type="text" class="form-control" id="title" name="title" >
		  </div>
		 <div class="form-group">
		    <label for="file">文章标题图片</label>
		    <input type="file" class="form-control" id="file" name="file" >
		  </div>
		  
		 <div class="form-row">
		 
			 <div class="form-group col-md-6">
			    <label for="channel">所属栏目</label>
			    <select class="form-control" id="channel" onchange="change()" name="channelId">
			      <option>请选择</option>
			    </select>
			  </div>
			 <div class="form-group col-md-6">
			    <label for="category">所属分类</label>
			    <select class="form-control" id="category" name="categoryId">
			      <option>请选择</option>
			    </select>
			  </div>
		</div>
		
		<!-- 富文本编辑器 -->
		<textarea name="content1" cols="100" rows="8" style="width:700px;height:200px;visibility:hidden;"><%=htmlspecialchars(htmlData)%></textarea>
		<br />
		<input type="button" name="button" onclick="publish()" value="提交内容" /> 
	</form>
</body>
<script type="text/javascript">
	$(function(){
		//使用ajax获取所有的栏目数据
		$.post(
			"/my/getChannels",
			function(channels){
				//将数据添加到下拉框
				for(i in channels){
					$("#channel").append("<option value='"+channels[i].id+"'> "+channels[i].name+"</option>");
				}
			}
		)
	})
	
	//修改栏目频道时，同步修改分类的数据
	function change(){
		//获取选中的频道的id
		var channelId = $("#channel").val();
		
		//清空所有分类的下拉框数据
		$("#category").html("");
		
		//使用ajax获取栏目频道下的所有的分类
		$.post(
			"/my/getCategoriesByChannelId",
			{channelId:channelId},
			function(categories){
				//将数据添加到下拉框
				for(i in categories){
					$("#category").append("<option value='"+categories[i].id+"'> "+categories[i].name+"</option>");
				}
			}
		)
	}
	
	//使用ajax提交数据
	function publish(){
		//获取form表单中的数据，将数据存入到FormData对象中
		var formData = new FormData($("form")[0]);
		//formData无法自动获取富文本编辑器中的数据，需要手动设置
		formData.set("content",editor1.html());
		
		//使用ajax提交文件上传数据
		$.ajax({
			method:"post",
			url:"/my/publish",
			data:formData,
			contentType:false,
			processData:false,
			success:function(result){
				
				if(result){
					alert("发布成功");
					location="";
				}else{
					alert("发布失败");
				}
			}
		})
	}
	
</script>
</html>

<%!
private String htmlspecialchars(String str) {
	str = str.replaceAll("&", "&amp;");
	str = str.replaceAll("<", "&lt;");
	str = str.replaceAll(">", "&gt;");
	str = str.replaceAll("\"", "&quot;");
	return str;
}
%>